<template>
	<view>
		<basics v-if="PageCur=='basics'"></basics>
		<components v-if="PageCur=='component'"></components>
		<plugin v-if="PageCur=='plugin'"></plugin>
		
		<user v-if="PageCur=='user'"></user>
		<ride v-if="PageCur=='ride'"></ride>
		<driver v-if="PageCur=='driver'"></driver>
		
		<view class="cu-bar tabbar bg-white shadow foot">
			<view class="action" @click="NavChange" data-cur="driver">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/basics' + [PageCur=='driver'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='driver'?'text-green':'text-gray'">车主</view>
			</view>
			<view class="action" @click="NavChange" data-cur="ride">
				<view class="cuIcon-cu-image">
					<image :src="'/static/tabbar/component' + [PageCur == 'component' ? '_cur' : ''] + '.png'"></image>
				</view>
				<view :class="PageCur == 'ride' ? 'text-green' : 'text-gray'">打车</view>
			</view>
			<view class="action" @click="NavChange" data-cur="user">
				<view class='cuIcon-cu-image'>
					<image :src="'/static/tabbar/plugin' + [PageCur == 'user'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='user'?'text-green':'text-gray'">个人中心</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			PageCur: 'basics'
		};
	},
	methods: {
		NavChange: function (e) {
			this.PageCur = e.currentTarget.dataset.cur;
		}
	}
};
</script>

<style>

</style>
